{% extends 'base.html' %}
{% load static %}

{% block title %}
    <title>新增用户</title>
{% endblock title %}

{% block navheader %}
    <section class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1>新增用户</h1>
                </div>
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item"><a href="{% url 'assets:dashboard' %}">首页</a></li>
                        <li class="breadcrumb-item"><a href="{% url 'user:userlists' %}">用户列表</a></li>
                        <li class="breadcrumb-item active">新增用户</li>
                    </ol>
                </div>
            </div>
        </div><!-- /.container-fluid -->
    </section>
{% endblock navheader %}

{% block content %}
    <div class="card">
        <div class="card-header">
            <h3 class="card-title">用户</h3>
        </div>
        <!-- /.card-header -->
        <div class="card-body row">
            <div class="col-12">
                <div class="alert alert-warning alert-dismissible" style="font-size:0.9rem;">
                    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
                    提示：添加后用户名不可修改.
                </div>
            </div>
            <div class="col-2 pt-1 pb-1">用户名<span style="color:red;"> * </span>：</div>
            <div class="col-10 pt-1 pb-1"><input class="form-control" type="text" id="username"></div>
            <div class="col-2 pt-1 pb-1">密码<span style="color:red;"> * </span>：</div>
            <div class="col-10 pt-1 pb-1"><input type="password" class="form-control" id="newpasswd" maxlength="256">
            </div>
            <div class="col-2 pt-1 pb-1">确认密码<span style="color:red;"> * </span>：</div>
            <div class="col-10 pt-1 pb-1"><input type="password" class="form-control" id="newpasswdagain"
                                                 maxlength="256"></div>
            <div class="col-2 pt-1 pb-1">昵称<span style="color:red;"> * </span>：</div>
            <div class="col-10 pt-1 pb-1"><input class="form-control" type="text" id="nickname"></div>
            <div class="col-2 pt-1 pb-1">邮箱<span style="color:red;"> * </span>：</div>
            <div class="col-10 pt-1 pb-1"><input class="form-control" type="text" id="email"></div>
            <div class="col-2 pt-1 pb-1">手机：</div>
            <div class="col-10 pt-1 pb-1"><input class="form-control" type="text" id="phone"></div>
            <div class="col-2 pt-1 pb-1">微信：</div>
            <div class="col-10 pt-1 pb-1"><input class="form-control" type="text" id="weixin"></div>
            <div class="col-2 pt-1 pb-1">QQ：</div>
            <div class="col-10 pt-1 pb-1"><input class="form-control" type="text" id="qq"></div>

            <div class="col-2 pt-1 pb-1">用户组：</div>
            <div class="col-5 pt-1 pb-1">
                <div class="form-group">
                    <span>所属组</span>
                    <select multiple class="form-control" id="group_select_left" style="min-height:150px">
                    </select>
                </div>
            </div>
            <div class="col-5 pt-1 pb-1">
                <div class="form-group">
                    <span>其他组</span>
                    <select multiple class="form-control" id="group_select_right" style="min-height:150px">
                        {% for group in all_groups %}
                            <option value="{{ group.id }}">{{ group.group_name }}</option>
                        {% endfor %}
                    </select>
                </div>
            </div>

            <div class="col-2 pt-1 pb-1">主机：</div>
            <div class="col-5 pt-1 pb-1">
                <div class="form-group">
                    <span>拥有主机</span>
                    <select multiple class="form-control" id="host_select_left" style="min-height:150px">
                    </select>
                </div>
            </div>
            <div class="col-5 pt-1 pb-1">
                <div class="form-group">
                    <span>其他主机</span>
                    <select multiple class="form-control" id="host_select_right" style="min-height:150px">
                        {% for host in all_hosts %}
                            <option value="{{ host.id }}">{{ host.hostname }}_{{ host.int_ip }}_{{ host.remote_user.username }}</option>
                        {% endfor %}
                    </select>
                </div>
            </div>

            <div class="col-2 pt-1 pb-1">性别<span style="color:red;"> * </span>：</div>
            <div class="col-10 pt-1 pb-1">
                <select class="form-control" id="sex" style="width: 100%;">
                    {% for sex in sex_choices %}
                        <option value="{{ sex.0 }}">{{ sex.1 }}</option>
                    {% endfor %}
                </select>
            </div>
            <div class="col-2 pt-1 pb-1">角色<span style="color:red;"> * </span>：</div>
            <div class="col-10 pt-1 pb-1">
                <select class="form-control" id="role" style="width: 100%;">
                    {% for role in role_choices %}
                        <option value="{{ role.0 }}">{{ role.1 }}</option>
                    {% endfor %}
                </select>
            </div>
            <div class="col-2 pt-1 pb-1">备注：</div>
            <div class="col-10 pt-1 pb-1"><textarea id="memo" class="form-control"></textarea></div>
            <div class="offset-2 col-10 pt-1 pb-1">
                <div class="custom-switch custom-switch-on-success">
                    <input type="checkbox" class="custom-control-input" id="enabled" checked>
                    <label class="custom-control-label" for="enabled">启用</label>
                </div>
            </div>
            <div class="offset-2 col-10 pt-2">
                <a class="btn btn-default" href="{% url 'user:userlists' %}">返回</a>
                <button class="btn btn-success ml-2" onclick="changeuserprofile(this);">提交</button>
            </div>
        </div>
        <!-- /.card-body -->
    </div>
    <!-- /.card -->
{% endblock content %}

{% block js %}

    <script>
        // 修改用户信息
        changeuserprofile = function (event) {
            toastr.options.closeButton = true;
            toastr.options.showMethod = 'slideDown';
            toastr.options.hideMethod = 'fadeOut';
            toastr.options.closeMethod = 'fadeOut';
            toastr.options.timeOut = 3000;
            toastr.options.extendedTimeOut = 0;
            toastr.options.progressBar = true;
            toastr.options.positionClass = 'toast-top-right';

            $(event).removeAttr("onclick");
            $(event).attr("disabled", true);

            var username = $('#username').val();
            var newpasswd = $('#newpasswd').val();
            var newpasswdagain = $('#newpasswdagain').val();
            if (newpasswd != newpasswdagain) {
                toastr.error('新增用户错误: 两次密码不一致');
                $(event).removeAttr("disabled");
                $(event).attr("onclick", "changeuserprofile(this);");
                return false;
            }
            var nickname = $('#nickname').val();
            var email = $('#email').val();
            var phone = $('#phone').val();
            var weixin = $('#weixin').val();
            var qq = $('#qq').val();
            //var sex = $("#sex").find("option:selected").text();
            var sex = $("#sex").find("option:selected").val();
            var role = $("#role").find("option:selected").val();
            var memo = $('#memo').val();
            var enabled;
            if ($("#enabled").is(':checked')) {
                enabled = true;
            } else {
                enabled = false;
            }

            var groups = new Array();
            $("#group_select_left option").each(function () {
                var value = $(this).val();   //获取option值
                groups.push(value);
            });
            groups = groups.join(",")

            var hosts = new Array();
            $("#host_select_left option").each(function () {
                var value = $(this).val();   //获取option值
                hosts.push(value);
            });
            hosts = hosts.join(",")

            csrfmiddlewaretoken = '{{ request.COOKIES.csrftoken }}';

            $.ajax({
                url: "{% url 'user_api:user_add' %}",
                async: true,
                type: 'POST',
                dataType: 'json',
                data: {
                    'csrfmiddlewaretoken': csrfmiddlewaretoken,
                    'username': username,
                    'newpasswd': newpasswd,
                    'newpasswdagain': newpasswdagain,
                    'nickname': nickname,
                    'email': email,
                    'phone': phone,
                    'weixin': weixin,
                    'qq': qq,
                    'sex': sex,
                    'memo': memo,
                    'enabled': enabled,
                    'role': role,
                    'groups': groups,
                    'hosts': hosts,
                },
                timeout: 5000,
                cache: true,
                beforeSend: LoadFunction, //加载执行方法
                error: errFunction,  //错误执行方法
                success: succFunction, //成功执行方法
            });

            function LoadFunction() {
                // 提交中
            };

            function errFunction() {
                // 消息框
                toastr.error('新增用户错误');
                $(event).removeAttr("disabled");
                $(event).attr("onclick", "changeuserprofile(this);");
            };

            function succFunction(res) {
                if (res.code != 200) {
                    // 消息框
                    toastr.error('新增用户错误: ' + res.err);
                    $(event).removeAttr("disabled");
                    $(event).attr("onclick", "changeuserprofile(this);");
                } else {
                    // 消息框
                    toastr.options.timeOut = 1000;
                    toastr.options.onHidden = function () {
                        window.location.href = "{% url 'user:userlists' %}";
                    }
                    toastr.success('新增用户成功');
                }
            };
        }

        // 左右选项框
        $(function () {
            //移到右边
            $('#add').click(function () {
                //获取选中的选项，删除并追加给对方
                $('#select1 option:selected').appendTo('#select2');
            });
            //移到左边
            $('#remove').click(function () {
                $('#select2 option:selected').appendTo('#select1');
            });

            //全部移到右边
            $('#add_all').click(function () {
                //获取全部的选项,删除并追加给对方
                $('#select1 option').appendTo('#select2');
            });
            //全部移到左边
            $('#remove_all').click(function () {
                $('#select2 option').appendTo('#select1');
            });

            //双击选项
            $('#group_select_left').dblclick(function () { //绑定双击事件
                //获取全部的选项,删除并追加给对方
                $("option:selected", this).appendTo('#group_select_right'); //追加给对方
            });
            //双击选项
            $('#group_select_right').dblclick(function () {
                $("option:selected", this).appendTo('#group_select_left');
            });

            //双击选项
            $('#host_select_left').dblclick(function () { //绑定双击事件
                //获取全部的选项,删除并追加给对方
                $("option:selected", this).appendTo('#host_select_right'); //追加给对方
            });
            //双击选项
            $('#host_select_right').dblclick(function () {
                $("option:selected", this).appendTo('#host_select_left');
            });
        });

    </script>
{% endblock js %}
